import React,{useEffect, useState} from 'react'
import { Tabbar } from 'react-vant'
import { FriendsO, HomeO, Search, SettingO } from '@react-vant/icons'
import { Redirect, Route, Switch, withRouter } from 'react-router-dom'
import Cate from './components/Cate'
import './App.css'
import Self from './components/Self'
import Cart from './components/Cart'
import AuthRoute from './components/AuthRoute'
import Spe from './components/Spe'
import Home from './components/Home'
import Channel from './components/Channel'
import ProductDetail from './components/ProductDetail'

export default withRouter((props) => {
  const [name, setName] = useState('/home')
  const [showNav,setShowNav] = useState(true)
  function setBtnName(val){
    setName(val)
  }

  //judge the path, hidden the nav when route to the special path
  function changeFlag(pathName){
    let arr = ['/home/searchPopup','/channel','/productDetail']
    if(arr.some(item=>pathName===item)){
      setShowNav(false)
    }
    else{
      setShowNav(true)
    }
  }
  useEffect(()=>{
    setName(props.location.pathname)
    // just add listener  
    //but we need acitve it now
    props.history.listen(location=>{
      changeFlag(location.pathname)
    })
    changeFlag(props.location.pathname)
    //addListener 
    
    return ()=>{
    }
  },[])
  return (<div className='appDiv'>
    <Switch>
      <Route path='/cate' component={Cate} />
      <AuthRoute path='/cart' component={Cart}  setName={setName}  />
      <Route path='/self' component={Self} />
      <Route path='/spe' component={Spe} />
      <Route path='/home' component={Home}/>
      {/* 
        i use the search string to find channel exactly
      */}
      <Route path='/channel' exact component={Channel} />
      <Route path='/productDetail' component={ProductDetail} />
      <Redirect from='/' to='/home' />
    </Switch>
    {
      showNav?(<div className='demo-tabbar'>
      <Tabbar value={name} onChange={(value)=>{
        setName(value)
        props.history.push(value)
        }}>
        <Tabbar.Item name='/home' icon={<HomeO />}>首页</Tabbar.Item>
        <Tabbar.Item name='/spe' icon={<Search />}>专题</Tabbar.Item>
        <Tabbar.Item name='/cate' icon={<FriendsO />}>分类</Tabbar.Item>
        <Tabbar.Item name='/cart' icon={<SettingO />}>购物车</Tabbar.Item>
        <Tabbar.Item name='/self' icon={<SettingO />}>我的</Tabbar.Item>
      </Tabbar>
    </div>):null
    }
  </div>
  )
})
